<template>
  <div
    style="
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: relative;
    "
  >
    <!-- 步骤条放在上方 -->
    <el-steps style="height: 100%; width: 80%" :active="active" finish-status="success">
      <el-step v-for="(step, index) in steps" :key="index" :title="step.title" />
    </el-steps>

    <!-- 根据当前步骤显示对应的表单内容或结果组件 -->
    <div v-if="currentStepComponent === 'step-2'" style="width: 50%; text-align: center;">
      <!-- 步骤3内容 -->
      <el-col :sm="12" :lg="6" style="display: flex; justify-content: center; align-items: center;">
        <el-result
          icon="success"
          title="信息已提交成功"
          sub-title="请耐心等待审核"
        >
          <template #extra>
            <!-- 返回首页按钮 -->
            <el-button type="primary" @click="goToHome">返回首页</el-button>
          </template>
        </el-result>
      </el-col>
    </div>
    <div v-else-if="currentStepComponent" style="width: 50%;">
      <slot :name="currentStepComponent" />
    </div>

    <!-- 当前步骤不是最后一步时显示上一步和下一步按钮 -->
    <div v-if="active.value !== stepsCount - 1">
      <el-button
        v-show="active.value >= 1"
        style="
          position: absolute;
          bottom: 12px;
          left: 12px;
          transform: translateY(50%);
          z-index: 999;
          display: block;
        "
        @click="previous"
      >上一步</el-button>

      <!-- 下一步按钮 -->
      <el-button
        v-show="active.value !== stepsCount - 1"
        style="position: absolute; bottom: 12px; right: 12px; transform: translateY(50%)"
        @click="next"
        >{{ active.value === stepsCount - 2 ? '提交' : '下一步' }}</el-button
      >
    </div>
  </div>
</template>

<script lang="ts" setup>
import {
  ref,
  watch,
  reactive,
  onMounted,
  onBeforeMount,
  computed,
  nextTick,
  onUnmounted,
  toRefs,
} from "vue";
import { ElTable, TableColumnCtx, ElMessageBox } from "element-plus";
import { Delete, Edit, Search, Share, Upload, Calendar } from "@element-plus/icons-vue";
import {
  ElButton,
  ElDialog,
  dialogEmits,
  ElMessage,
  FormRules,
  FormInstance,
} from "element-plus";
import { CircleCloseFilled } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import axios from "../../axios/axiosInstance";
import Cookies from "js-cookie";
import { format } from "date-fns";
const steps = ref([{ title: "测试1" }, { title: "测试2" }, { title: "测试完成" }]);
const stepsCount = steps.value.length;
const active = ref(0);
onMounted(() => {
  currentStepComponent.value = `step-${active.value}`;
});
const currentStepComponent = ref<string | null>(null);
const previous = () => {
  if (active.value > 0) {
    active.value--;
    currentStepComponent.value = `step-${active.value}`;
  }
};
const goToHome = () => {
  // 实现跳转逻辑，例如使用router
};
const next = () => {
  if (active.value < stepsCount-1 ) {
    active.value++;
    currentStepComponent.value = `step-${active.value}`;
  } else {
    // 到达最后一步，但不重置步骤条
    active.value = stepsCount-1 ;
    // 设置为步骤3的特殊标识
    currentStepComponent.value = 'step-2';
  }
};
</script>

<style scoped>
/* 添加自定义样式 */
</style>
